<template>
    <div>
        <el-container>
            <el-header style="height: 60px;background-color: #F8F9FF;display: flex;justify-content: space-around">
                <div style="line-height: 60px">
                    欢迎 <span style="color: deepskyblue;font-weight: 500">{{user.nickname}}</span>
                </div>
                <div>
                    <el-image
                            style="width: 40px; height: 40px;border-radius: 20px;border: 0!important;margin-top: 10px"
                            :src="user.avatar"
                            :preview-src-list="[user.avatar]"
                    ></el-image>
                </div>
                <div style="margin-top: 10px">
                    <el-button type="success" @click="goback" plain>返回</el-button>
                </div>
            </el-header>
            <el-main style="display: flex;justify-content: center;align-items: center">
                <el-card style="width: 1300px">
                    <el-table
                            @selection-change="handleSelectionChange"
                            size="mini"
                            :data="blogList"
                            stripe
                            style="width: 100%">

                        <el-table-column
                                prop="id"
                                label="id"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="查看"
                                width="180">
                            <template scope="scope">
                                <el-button size="mini"  plain type="primary" @click="toDetail(scope.row)">查看博客</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="description"
                                label="描述">
                        </el-table-column>
                        <el-table-column
                                prop="typeName"
                                label="分类">
                        </el-table-column>
                        <el-table-column
                                prop="tagName"
                                label="标签">
                            <template slot-scope="scope">
                                <el-tag style="margin-right: 5px" v-for="item in scope.row.tagList" size="mini">
                                    {{item}}
                                </el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="views"
                                label="浏览量">
                        </el-table-column>
                        <el-table-column
                                prop="userId"
                                label="用户Id">
                        </el-table-column>


                        <el-table-column label="操作">
                            <template style="display: flex" slot-scope="scope">
                                <el-button
                                        style="margin-right: 5px"
                                        size="mini"
                                        @click="editBlog(scope.row)">编辑
                                </el-button>

                                <!--                                    <el-button>t</el-button>-->
                                <!--                            <el-popconfirm>1</el-popconfirm>-->
                                <!--                            <el-button-->
                                <!--                                    size="mini"-->
                                <!--                                    type="danger"-->
                                <!--                                    @click="handleDelete(scope.$index, scope.row)">删除-->
                                <!--                            </el-button>-->
                                <el-popconfirm
                                        @confirm="deleteBlog(scope.row)"
                                        title="这是一段内容确定删除吗？"
                                >

                                    <el-button
                                            type="danger"
                                            size="mini"
                                            @click="handleDelete(scope.$index, scope.row)"
                                            slot="reference">删除
                                    </el-button>
                                </el-popconfirm>


                                <!--        修改对话框结束-->
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    import jwtDecode from "jwt-decode";
    // import Global from "../assets/js/Global";
    import Global from "../../public/static/Global";

    export default {
        name: "platform",
        data() {
            return {
                blogList: [],  // 分类数据
                user: {}
            }
        },
        methods: {
            async deleteBlog(row) {
                const {data: res} = await this.$http.delete('/blog/platform/' + row.id + '/' + row.userId)
                if (res.meta.status === 200) {
                    this.$message.success('删除成功!')
                    this.getBlogInfo();
                } else {
                    this.$message.error(res.meta.msg);
                }
            }
            ,
            async getBlogInfo() {  // 得到博客的信息
                const token = localStorage.getItem('token')
                if (!token) {
                    this.$message.error('请先登录');
                    return;
                }
                const obj = jwtDecode(token)
                this.user.nickname = obj.nickname;

                let userId = obj.id
                // 取出对应评论的用户id，去查用户的头像
                const {data: res1} = await this.$http.get('/comment/avatar/' + userId)
                let avatar = Global.baseUrl + res1.data
                this.user.avatar = avatar;
                const {data: res} = await this.$http.get('/blog/platform/' + userId)
                console.log(res);


                // this.total = res.data.total;
                // console.log(res.data[7].typeImg);
                this.blogList = res.data
            },
            editBlog(row) {
                console.log(row)
                console.log(row.id)
                this.$router.push({
                    path: "/platformedit",
                    query: {
                        id: row.id
                    }
                })
            },
            goback() {
                this.$router.go(-1)
            },
            toDetail(row) {
                // console.log(row)
                this.$router.push({
                    name: 'Detail',
                    query: {
                        id: row.id
                    }
                })
            }
        }
        , created() {
            // console.log('222')
            this.getBlogInfo();
        },
    }
</script>

<style scoped>

</style>